<template>
  <div>
    <el-card class="box-card">
      <div class="honTip">补全／修改资质
        <span>温馨提示：资料补全，审核通过后，方可进行广告投放</span>
      </div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm honForm" label-width="170px">
        <ul class="honList">
          <li>
            <el-form-item label="企业联系人" prop="contact">
              <el-input v-model="ruleForm.contact" placeholder="张峰"></el-input>
            </el-form-item>
            <el-form-item label="证件类型" prop="type">
              <el-select v-model="ruleForm.type" placeholder="请选择证件类型">
                <el-option label="身份证" value="1"></el-option>
                <el-option label="护照" value="2"></el-option>
                <el-option label="军官证" value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="number">
              <el-input v-model="ruleForm.number"></el-input>
            </el-form-item>
            <el-form-item label="企业工商地址" prop="address">
              <el-input v-model="ruleForm.address"></el-input>
            </el-form-item>
            <el-form-item label="企业营业执照号" prop="licenseNo">
              <el-input v-model="ruleForm.licenseNo"></el-input>
            </el-form-item>
          </li>
          <li>
            <el-form-item prop="pic1" label="经营许可证">
              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="uploadSuccess1" :before-upload="uploadBefore">
                <img v-if="ruleForm.pic1" :src="ruleForm.pic1" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">(图片大小≤2m，支持格式：jpg、png)</div>
              </el-upload>
            </el-form-item>
          </li>
          <li>
            <el-form-item prop="pic2" label="企业营业执照">
              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="uploadSuccess2" :before-upload="uploadBefore">
                <img v-if="ruleForm.pic2" :src="ruleForm.pic1" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">(图片大小≤2m，支持格式：jpg、png)</div>
              </el-upload>
            </el-form-item>
          </li>
          <li>
            <el-form-item prop="pic3" label="企业资质证明">
              <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="uploadSuccess3" :before-upload="uploadBefore">
                <img v-if="ruleForm.pic3" :src="ruleForm.pic1" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div slot="tip" class="el-upload__tip">(图片大小≤2m，支持格式：jpg、png)</div>
              </el-upload>
            </el-form-item>
          </li>
          <li>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提 交</el-button>
              <el-button @click="resetForm('ruleForm')">取 消</el-button>
            </el-form-item>
          </li>
        </ul>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        contact: "",
        type: "",
        number: "",
        address: "",
        licenseNo: "",
        pic1: "",
        pic2: "",
        pic3: ""
      },
      rules: {
        contact: [
          { required: true, message: "请输入企业联系人", trigger: "blur" },
          { min: 1, max: 4, message: "长度在 1 到 4 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择证件类型", trigger: "change" }
        ],
        number: [
          { required: true, message: "请输入证件号码", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入企业工商地址", trigger: "blur" }
        ],
        licenseNo: [
          { required: true, message: "请输入企业营业执照号", trigger: "blur" }
        ],
        pic1: [
          { required: true, message: "请上传经营许可证", trigger: "blur" }
        ],
        pic2: [
          { required: true, message: "请上传企业营业执照", trigger: "blur" }
        ],
        pic3: [
          { required: true, message: "请上传企业资质证明", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    uploadSuccess1(){
      this.ruleForm.pic1 = URL.createObjectURL(file.raw)
    },
    uploadSuccess2(){
      this.ruleForm.pic2 = URL.createObjectURL(file.raw)
    },
    uploadSuccess3(){
      this.ruleForm.pic3 = URL.createObjectURL(file.raw)
    },
    uploadBefore(file) {
      const isJPG = file.type === "image/jpeg"
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!")
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
      }
      return isJPG && isLt2M
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!")
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.line {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d7dde4;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

.honTip {
  font-size: 18px;
  color: #657180;
  line-height: 160%;
  padding: 20px 0;
  margin-bottom: 5px;
}
.honTip span {
  font-size: 14px;
  color: #ef5252;
  padding-left: 10px;
}
.honForm {
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  margin-bottom: 15px;
  padding: 15px 0 0;
}
.honList {
  list-style: none;
  padding: 0;
  margin: 0;
}
.honList li {
  padding: 20px 15px 0;
  border-bottom: 1px solid #ebebeb;
}
.honList li:first-child {
  padding: 20px 15px;
}
.honList li:first-child .el-form-item {
  max-width: 535px;
}
.honList li:last-child {
  border: none;
}
.honList .el-select {
  display: block;
}
.honList .el-form-item__label {
  font-size: 16px;
  font-weight: normal;
}
.honList .el-form-item.is-required .el-form-item__label:before {
  display: none;
}
.honList .el-form-item.is-required .el-form-item__label:after {
  content: "*";
  color: #ff5959;
  margin-left: 4px;
  position: relative;
  top: 2px;
  font-size: 16px;
}
.honList .el-upload {
  vertical-align: middle;
  margin-right: 20px;
}
.honList .el-upload__tip {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  color: #b1b8be;
}
.honList .avatar-uploader-icon {
  width: auto;
  height: auto;
  min-width: 60px;
  line-height: 60px;
}
.honList .avatar {
  width: auto;
  height: auto;
  min-width: 60px;
  min-height: 60px;
  max-width: 120px;
}
.honList li:last-child .el-form-item__content {
  margin-left: 0 !important;
  text-align: center;
}
.honList .el-button {
  min-width: 120px;
  color: #fd893e !important;
  border-color: #fd893e !important;
  background: none !important;
}
.honList .el-button--primary {
  color: #ffffff !important;
  background: #fd893e !important;
  border-color: #fd893e !important;
}
@media screen and (max-width: 768px) {
  .honTip {
    padding: 10px 0;
    font-size: 16px;
  }
  .honTip span {
    font-size: 12px;
    display: block;
    padding: 0;
  }
  .honForm {
    padding: 0;
  }
  .honList li {
    padding: 10px 15px;
  }
  .honList li:first-child {
    padding: 10px 15px;
  }
  .honList .el-form-item {
    margin-bottom: 5px;
  }
  .honList .el-form-item__error {
    position: static;
  }
  .honList .el-form-item__label {
    float: none;
    text-align: left;
    font-size: 14px;
    width: 100% !important;
  }
  .honList .el-form-item.is-required .el-form-item__label:before {
    display: inline;
  }
  .honList .el-form-item.is-required .el-form-item__label:after {
    display: none;
  }
  .honList .el-form-item__content {
    margin-left: 0 !important;
  }
  .honList .el-upload {
    margin-right: 5px;
  }
  .honList .el-upload__tip {
    display: block;
    line-height: 160%;
  }
  .honList .el-button {
    min-width: 100px;
  }
  .honList li:last-child .el-form-item__content {
    padding: 10px 0;
  }
}
</style>
